@loader_box_shadow:2px 2px 4px rgba(0, 0, 0, 0.23);

#progressBox
{
  z-index: 2002;
  -moz-border-radius : 5px;
  border-radius : 5px;
  width: 305px !important;
  padding: 3px;
  display: block;
  top: 30%;
  left: 40%;
  position: absolute;
  min-width: 305px;
  box-shadow: @loader_box_shadow;
  -webkit-box-shadow: @loader_box_shadow;
  -moz-box-shadow: @loader_box_shadow;
  div.dialogTitle{
    display: none;
  }
  .bounce-spinner {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 30px auto;
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: @primary-1-color;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }


}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
}

.csstransitions{

  #AjxpConnexion-loader {
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    z-index: 1022 !important;
  }
  #AjxpConnexion-loader {
    height: 2px;
    width: 100%;
    position: relative;
    overflow: hidden;
    img{
      display: none;
    }
    &:before{
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 200px;
      height: 4px;
      background-color: #03A9F4;
      animation: connexionLoading 1.5s linear infinite;
    }
  }

  @keyframes connexionLoading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
  }

}

.no-csstransitions{

  #AjxpConnexion-loader{
    left:49% !important;
    top: 7px !important;
    width:30px;
  }

  #AjxpConnexion-loader img{
    height:6px;
  }

}

.radial-progress{

  display: inline-block;

  .size(@w, @h) {
    height: @h;
    width: @w;
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  .charts-container:after {
    clear: both;
    content: "";
    display: table;
  }

  @bg: #ffffff;
  @pie-main: @teal-500;
  @size: 16px;

  .pie-wrapper {
    .size(@size, @size);
    float: left;
    margin: 13px 8px 0 0;
    position: relative;

    &:nth-child(3n+1) {
      clear: both;
    }

    .pie {
      .size(100%, 100%);
      clip: rect(0, @size, @size, @size / 2);
      left: 0;
      position: absolute;
      top: 0;

      .half-circle {
        .size(100%, 100%);
        border: @size / 10 solid #3498db;
        border-radius: 50%;
        clip: rect(0, @size / 2, @size, 0);
        left: 0;
        position: absolute;
        top: 0;
      }
    }

    .label {
      @font-size: @size / 4;
      @font-size-redo: @size * 4;

      background: @bg;
      border-radius: 50%;
      bottom: @font-size-redo / 10;
      color: #ecf0f1;
      cursor: default;
      display: block;
      font-size: @font-size;
      left: @font-size-redo / 10;
      line-height: @font-size-redo * .65;
      position: absolute;
      right: @font-size-redo / 10;
      text-align: center;
      top: @font-size-redo / 10;

      .smaller {
        color: #bdc3c7;
        font-size: .45em;
        padding-bottom: 20px;
        vertical-align: super;
      }
    }

    .shadow {
      .size(100%, 100%);
      border: @size / 10 solid #bdc3c7;
      border-radius: 50%;
    }

    &.style-2 {
      .label {
        background: none;
        color: #7f8c8d;

        .smaller {
          color: #bdc3c7;
        }
      }
    }

    &.progress-30 {
      .draw-progress(30, #3498db);
    }

    &.progress-60 {
      .draw-progress(60, #9b59b6);
    }

    &.progress-90 {
      .draw-progress(90, #e67e22);
    }

    &.progress-45 {
      .draw-progress(45, #1abc9c);
    }

    &.progress-75 {
      .draw-progress(75, #8e44ad);
    }

    &.progress-95 {
      .draw-progress(95, #e74c3c);
    }
  }

  .pie-wrapper--solid {
    border-radius: 50%;
    overflow: hidden;

    &:before {
      border-radius: 0 100% 100% 0 / 50%;
      content: '';
      display: block;
      height: 100%;
      margin-left: 50%;
      transform-origin: left;
    }

    .label {
      background: transparent;
    }

    // GENERATE ALL VALUES FROM 1 to 100
    .loop(@name, @progressValue) when (@progressValue <= 100){
      .loop(@name; (@progressValue + 1));
      &.@{name}-@{progressValue} { .draw-progress--solid(@progressValue, @pie-main, @bg); }
    }
    .loop(progress, 0);
  }

  // --
  .draw-progress(@progress, @color) when (@progress <= 50) {
    .pie {
      .right-side {
        display: none;
      }
    }
  }

  .draw-progress(@progress, @color) when (@progress > 50) {
    .pie {
      clip: rect(auto, auto, auto, auto);

      .right-side {
        transform: rotate(180deg);
      }
    }
  }

  .draw-progress(@progress, @color) {
    .pie {
      .half-circle {
        border-color: @color;
      }

      .left-side {
        @rotate: @progress * 3.6;
        transform: rotate(~'@{rotate}deg');
      }
    }
  }

  .draw-progress--solid(@progress, @color, @bg) when (@progress <= 50) {
    &:before {
      background: @bg;
      transform: rotate((100 - (50 - @progress)) / 100 * 360deg * -1);
    }
  }

  .draw-progress--solid(@progress, @color, @bg) when (@progress > 50) {
    &:before {
      background: @color;
      transform: rotate((100 - @progress) / 100 * 360deg);
    }
  }

  .draw-progress--solid(@progress, @color, @bg) {
    background: linear-gradient(to right, @color 50%, @bg 50%);
  }
}

